<script setup>
import { ref, onMounted } from 'vue'
import { useGetHomeDataService } from '@/api/requsets/index.js'
import staticImg from '@/assets/main.png'
import { useGoodsStore } from '@/stores/modules/GoodsStore.js'
import GoodsItem from '@/components/GoodsItem.vue'

const goodsStore = useGoodsStore()

onMounted(async () => {
  // 获取首页数据
  const {
    data: {
      pageData: { items }
    }
  } = await useGetHomeDataService()
  console.log(items)
  goodsStore.saveData(items[1].data, items[3].data, items[6].data)
})
// // 轮播图 图片数组
// const images = ref()
// // 导航组 数据数组
// const navigations = ref()
</script>

<template>
  <div class="home">
    <!-- 头部 -->
    <van-nav-bar class="header" title="商城" />
    <!-- 搜索框 -->
    <van-search
      shape="round"
      placeholder="请在此输入搜索关键词"
      @click="$router.push('/search')"
    />
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item
        v-for="item in goodsStore.imgList"
        class="img-container"
        :key="item.imgName"
      >
        <img :src="item.imgUrl" />
      </van-swipe-item>
    </van-swipe>
    <!-- 分类导航 -->
    <van-grid :column-num="5">
      <van-grid-item
        v-for="item in goodsStore.navigations"
        :key="item.link"
        :text="item.text"
        @click="$router.push(`/category`)"
        ><van-image
          :src="item.imgUrl"
          style="width: 40px; height: 40px; margin-bottom: 10px"
        />
        <span style="font-size: 12px; color: #646566"> {{ item.text }}</span>
      </van-grid-item>
    </van-grid>
    <img class="static-img" :src="staticImg" alt="" />
    <div class="goodsList">
      <p class="goodList-title">————猜你喜欢————</p>
      <GoodsItem
        v-for="item in goodsStore.goodsList"
        :key="item.goods_id"
        :item="item"
        @click="$router.push(`/goodsDetail/${item.goods_id}`)"
        mode="normal"
      ></GoodsItem>
    </div>
  </div>
</template>

<style lang="less">
.home {
  .header {
    background: #c21401;
    .van-nav-bar__title {
      color: #fff;
      font-weight: normal;
    }
  }
  .img-container {
    width: 375px;
    height: 185px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .static-img {
    width: 100vw;
    height: auto;
    margin-bottom: 20px;
  }
  .goodsList {
    min-height: 2000px;
    text-align: center;
    .goodList-title {
      color: #c21401;
      margin-bottom: 20px;
    }
  }
}
</style>
